<template>
    <!--顶部搜索栏-->
    <van-sticky>
        <div class="top-search-box">
            <van-nav-bar left-arrow @click-left="onClickLeft()">
                <template #title>
                    <van-search v-model="searchContent" show-action placeholder="请输入搜索关键词~" @search="submitSearch()"
                        @cancel="onCancel()">
                        <template #action>
                            <div @click="submitSearch()">{{ searchContent ? '搜索' : '取消'
                            }}</div>
                        </template>
                    </van-search>
                </template>
            </van-nav-bar>
        </div>
        <div>
            <van-tabs v-model:active="currentTabIndex" @change="changeTab">
                <van-tab :title="item.tag" v-for="item in groupList" v-bind:key="item.id" />
            </van-tabs>
        </div>
    </van-sticky>
    <van-loading vertical v-if="showOverlay">
        <template #icon>
            <van-icon name="star-o" size="30" />
        </template>
        加载中...
    </van-loading>

    <!--分页渲染列表-->
    <div class="cloth-container" @scroll="pageScroll">
        <!--骨架屏列表-->
        <div v-if="isClothLoading">
            <van-skeleton :style="{ flexWrap: 'wrap' }">
                <template #template>
                    <div class="cloth-skele-box" v-for="(item) in [1, 2, 3, 4, 5, 6]" :key="item">
                        <div class="pre-img">
                            <van-skeleton-image image-size="100%" />
                        </div>
                        <div class="pre-title">
                            <van-skeleton-paragraph row-width="60%" />
                            <van-skeleton-paragraph />
                        </div>
                    </div>
                </template>
            </van-skeleton>
        </div>
        <div v-else-if="clothList.length" class="cloth-box">
            <div class="cloth-item" v-for="(item) in clothList" v-bind:key="item.cloth_id"
                @click="changeToDetail(item.cloth_id)">
                <div class="cloth-img"><van-image fit="contain" width="100%" height="100%" :src="item.cover" /></div>
                <div class="cloth-title">{{ item.tag }}</div>
                <div class="cloth-price">￥{{ item.price.toFixed(1) }}<span>￥{{
                    parseInt(item.price.toFixed(1) / item.discount).toFixed(1) }}</span></div>
                <div style="display:flex;align-items: center;justify-content: space-between;">
                    <div class="cloth-discount"><span>{{ (item.discount * 10).toFixed(1) }}折优惠</span></div>
                    <div class="want-buy">{{ item.likes }}人想买</div>
                </div>
            </div>
            <!--回顶部操作-->
            <van-back-top class="topbar-custom" right="25" bottom="100" @click="scrollToTop">
                <van-icon class-prefix="iconfont" size="32px" name="topbar"></van-icon>
            </van-back-top>
        </div>
        <!--实在找不到了-->
        <div v-else class="empty-box">
            <van-empty image="https://create.nightowl.top/static/images/404.png" image-size="300"
                description="资源都被外星人抱走了~" />
        </div>
    </div>
    <!-- <van-overlay :show="showOverlay" /> -->
</template>
  
<script setup>
// @ is an alias to /src
import { showToast } from "vant";
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import _service from "../request/axios";
const router = useRouter();
const searchContent = ref(router.currentRoute.value.query.content);
// let currentPage = ref(1);
// const limit = ref(10);
let groupList = ref([{ id: 1, tag: '商品' }, { id: 2, tag: '文章推荐' }, { id: 3, tag: '图文推荐' }]);//写死这里的数据
let currentTabIndex = ref(0);
let clothList = ref([]);
let isClothLoading = ref(true);
let isTotal = ref(false);
let hasChange = ref(false);
let showOverlay = ref(false);//通过遮罩层提高系统的性能
// let preTab = ref(0);


//这里添加对搜索内容的监听
watch(searchContent, (newValue, oldValue) => {
    searchContent.value = newValue;
    hasChange.value = true
    isTotal.value = false;
}, { immdiate: false })

function onClickLeft() {
    router.back();
}

function changeToDetail(id) {
    router.push({
        path: '/detail/goods',
        query: {
            id
        }
    })
}
function changeTab(index) {
    if (index != 0) {
        showToast("即将开放，尽请期待~");
        // currentTabIndex.value = 0;
    }
    console.log("输出当前跳转的索引：", index);
}
function pageScroll(e) {
    if (showOverlay.value) return;//遮罩显示，禁止滑动
    if (e.target.scrollTop + e.target.clientHeight + 10 > e.target.scrollHeight) {
        //重新发送请求，获取新一批衣服的数据
        if (!isTotal.value) {
            // showLoadingToast({
            //     message: '加载中...',
            //     forbidClick: true,
            //     loadingType: 'spinner',
            // });
            searchReuqest();
        } else {
            showToast({
                message: '再怎么找也没有啦~',
                wordBreak: 'break-word'
            });
        }
    }
}

function onCancel() {
    console.log("取消搜索");
    searchContent.value = "";
    hasChange.value = true;
}

function searchReuqest() {
    showOverlay.value = true;
    //处理登录提示弹出层
    if (searchContent.value == "") {
        showToast("搜索内容不能为空~");
        return;
    }
    const params = {
        content: searchContent.value
    }
    const searchIndex = localStorage.getItem("searchIndex");
    if (searchIndex) {
        params.searchIndex = searchIndex;
    }
    _service.post("/cloth/search", params).then(res => {
        if (res) {
            if (!res.code) {
                if (hasChange.value) {
                    clothList.value = new Array();
                    hasChange.value = false;
                }
                localStorage.setItem("searchIndex", res.data.searchIndex);
                if (clothList.value.length) {
                    clothList.value = clothList.value.concat(res.data.list);
                } else {
                    clothList.value = res.data.list;
                }
                isTotal.value = res.data.isTotal;
                // showToast("加载完成~");
            } else {
                showToast(res.msg);
            }
        } else {
            showToast("服务端错误，请稍后再试~")
        }
        isClothLoading.value = false;
        showOverlay.value = false;
    })
}
function submitSearch() {
    if (searchContent.value) {
        searchReuqest();
    } else {
        showToast("搜索内容不能为空哦~");
        return;
    }
}
onMounted(() => {
    localStorage.setItem("searchIndex", "1");//初始化搜索下标
    if (searchContent.value) {
        searchReuqest();
    }
})

</script>
<style scoped lang="less">
.top-search-box {
    .van-cell {
        padding: 0px 10px;
    }

    .van-nav-bar__title {
        font-weight: normal;
    }

    .van-search__action {
        font-weight: bold;
    }

    ::v-deep(.van-nav-bar__title) {
        width: 100%;
    }

    ::v-deep(.van-field__control) {
        font-size: 12px;
    }

}

.cloth-container {
    width: 100%;
    overflow: scroll;
    height: calc(100vh - 90px);
    padding-bottom: 30px;
}

.cloth-skele-box {
    float: left;
    width: 50%;
    box-sizing: border-box;
    margin-top: 10px;
}

.cloth-skele-box:nth-child(odd) {
    padding-left: 10px;
    padding-right: 5px;
}

.cloth-skele-box:nth-child(even) {
    padding-left: 5px;
    padding-right: 10px;
}

.cloth-skele-box .pre-img {
    height: 220px;
}

.cloth-skele-box .pre-title {
    margin-top: 10px;
}

.cloth-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    overflow: scroll;
}

.cloth-item {
    width: 50%;
    padding: 5px 8px 15px;
    box-sizing: border-box;
}

.cloth-title {
    margin-top: 6px;
    line-height: 20px;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 10px;
}

.cloth-price {
    color: #ff3029;
    font-weight: bold;
    font-size: 14px;
}

.cloth-price span {
    font-size: 12px;
    color: #a8abb8;
    font-weight: normal;
    margin-left: 4px;
    text-decoration: line-through;
}

.cloth-discount span {
    background-color: #fde7e4;
    color: #fe605a;
    font-size: 12px;
    margin: 3px 0px;
    padding: 2px 4px;
}

.want-buy {
    font-size: 12px;
    color: #b4b4b4;
}

.empty-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>